<template>
  <div>
    <!-- 头部标题栏 -->
    <content-header
      :title="routeItem.title"
    ></content-header>

    <!-- 列表 -->
    <div v-loading="loading">
      <common-list
        :listItems="list"
        :listType="String(routeItem.style)"
      ></common-list>
      <p v-if="!list.length">暂无内容</p>
    </div>

    <!-- 分页组件 -->
    <el-pagination
      background
      layout="prev, pager, next"
      :total="page.count"
      :page-size="page.size"
      class="xui-margin-top xui-text-center"
      @current-change="handleClickPage"
      :current-page.sync="page.index">
    </el-pagination>
  </div>
</template>

<script>
import CommonList from "@/components/common-page-template/common-list";
import ContentHeader from "@/components/widge/content-header";
import { getList } from "@/api/list";
export default {
  components: {
    "common-list": CommonList,
    "content-header": ContentHeader
  },
  data() {
    return {
      list: [],
      loading: true,
      page: {
        count: null,
        size: 10,
        index: Number(this.$route.query.page) || 1
      }
    };
  },
  computed: {
    routeItem() {
      let routes = this.$store.getters.siteMap;
      let result;
      routes.forEach(route => {
        if (route.children) {
          route.children.forEach(child => {
            if (child.name == this.$route.name) {
              result = child;
            }
          });
        }
      });
      return result;
    }
  },
  methods: {
    refreshList() {
      getList(this.routeItem.id, this.page.index).then(res => {
        this.list = res.data.recordsList;
        this.loading = false;
        this.page.count = res.data.count;
      });
    },
    handleClickPage(pageIndex) {
      this.page.index = pageIndex;
      this.$router.push({ name: this.$route.name, query: { page: pageIndex } });
    }
  },
  mounted() {
    this.refreshList();
  },
  watch: {
    routeItem: function() {
      this.loading = true;
      this.refreshList();
    }
  }
};
</script>

